<style type="text/css">
	.layui-table-cell{
		height: auto;
	}
	
	.layui-table-cell img{
		width: 60px;
		height: 60px;
	}
</style>

<style>
	#demo2 img{
		width: 92px;
		height: 92px;
	}
</style>

<style>
	#demo2 span{
			position: relative;
		}
		#demo2 span:hover::after{
			content: "X";
			display: block;
			background-color: #FF5722;
			width: 16px;
			height: 16px;
			border-radius: 16px;
			position: absolute;
			line-height: 16px;
			color: #fff;
			text-align: center;
			top: -46px;
			right: 0px;
		}
</style>

<fieldset class="layui-elem-field layui-field-title">
  <legend>商品列表</legend>
</fieldset>

<table id="list" lay-filter="list"></table>


<!-- 操作：恢复删除编辑 -->
<script type="text/html" id="bar">
	{{#
		if(d.status == 1){
	}}
	<a class="layui-btn layui-btn" lay-event="recover">恢复</a>
	{{#
		}
	}}
	{{#
		if(d.status == 0){
	}}
	<a class="layui-btn layui-btn-danger" lay-event="delete">删除</a>
	{{#
		}
	}}
	
<a class="layui-btn layui-btn-normal" lay-event="edit"> 编辑</a>
</script>

<script type="text/html" id="goods-edit">
	<form class="layui-form">
	
		<input type="hidden" name="id" />
	
		<div class="layui-form-item">
			<label class="layui-form-label">商品分类</label>
			<div class="layui-input-inline">
				<select name="parent"></select>
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">二级分类</label>
			<div class="layui-input-inline">
				<select name="goodsSortId">
					
				</select>
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">商品名</label>
			<div class="layui-input-inline">
				<input type="text" name="name" class="layui-input" placeholder="请输入商品名" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">商品描述</label>
			<div class="layui-input-inline">
				<textarea name="dscp" class="layui-input" placeholder="请输入商品描述" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">商品价格</label>
			<div class="layui-input-inline">
				<input type="number" name="price" class="layui-input" placeholder="请输入商品价格" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">版本</label>
			<div class="layui-input-inline">
				<input type="text" name="version" class="layui-input" placeholder="请输入商品版本" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">商品色彩</label>
			<div class="layui-input-inline">
				<input type="text" name="color" class="layui-input" placeholder="请输入商品色彩" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">套餐</label>
			<div class="layui-input-inline">
				<input type="text" name="suit" class="layui-input" placeholder="请输入商品型号" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label">库存</label>
			<div class="layui-input-inline">
				<input type="number" name="count" class="layui-input" placeholder="请输入商品型号" />
			</div>
		</div>
		
		<div class="layui-form-item">
			<input type="hidden" name="picture" />
			<label class="layui-form-label">商品图片</label>
			<div class="layui-input-inline">
				<div class="layui-upload">
				  <button type="button" class="layui-btn" id="test2">多图片上传</button> 
				  <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
				    预览图：
				    <div class="layui-upload-list" id="demo2"></div>
				 </blockquote>
				</div>
			</div>
		</div>
		
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
			<div class="layui-input-inline">
				<button type="submit" class="layui-btn" lay-submit lay-filter="edit">修改</button>
			</div>
		</div>
	</form>
</script>

<script type="text/html" id="pictures">
	{{#		
		for(var i=0;i<d.pictures.length;i++){
	}}
		<img src="http://localhost:9000/upload/{{d.pictures[i].name}}" />
	{{#
		}
	}}	
</script>

<script type="text/javascript">
	layui.use(['form','table','upload'],function(){
		var table = layui.table;
		var form = layui.form;
		var token = getCookie("token");
		var upload = layui.upload;
		
		table.render({
			// headers:{token:token},
			elem:'#list',
			url:'http://localhost:9000/api/goods',
			method:'get',
			height:500,
			page:true,
			cols:[[
				{field:'id',title:'ID',},
				{field:'goods_sort_id',title:'二级分类',templet:function(d){
					return d.goodsSort.name;
				}},
				// {field:'parent',title:'分类',templet:function(d){
				// 	return d.goodsSort.parentSort.name;
				// }},
				{field:'name',title:'商品名',},
				{field:'dscp',title:'商品描述',},
				{title:'图片',templet:'#pictures',width:200},
				{field:'price',title:'价格',},
				{field:'version',title:'版本',},
				{field:'color',title:'颜色',},
				{field:'suit',title:'套餐',},
				{field:'count',title:'库存',},
				{field:'status',title:'状态',templet:function(d){
					return ['正常','过期'][d.status];
				}},
				{title:'操作',toolbar:'#bar',width:200}
			]],
			parseData:function(res){
				return{
					"code": 0, //解析接口状态
					"msg": res.msg, //解析提示文本
					"count": res.data.total, //解析数据长度
					"data": res.data.list //解析数据列表
				};
			},
			done:function(){
				$(".layui-table-main  tr").each(function (index ,val) {
					$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
				});
			}
		});
		
		table.on('tool(list)',function(obj){
			
			if (obj.event == 'delete') {
				layer.confirm('确认删除？',function(index){
					layer.close(index);
					
					//调用删除方法（重置状态码为1）
					$.ajax({
						url:'http://localhost:9000/api/goods',
						type:'delete',
						data:{id:obj.data.id},
						dataType:'json',
						success:function(data){
							if (data.status == 200) {
								layer.msg("删除成功");
							} else if(data.status == 404){
								layer.msg(data.msg);
							}
							table.reload('list');
						},
						error:function(){}
					});
				})
			} else if(obj.event == 'edit'){
				var index = layer.open({
					type:1,
					title:'编辑商品',
					area:['600px','500px'],
					content:$('#goods-edit').html()
				});
				$("input[name='id']").val(obj.data.id);
				$("input[name='name']").val(obj.data.name);
				
				$("textarea[name='dscp']").val(obj.data.dscp);
				$("input[name='price']").val(obj.data.price);
				$("input[name='version']").val(obj.data.version);
				$("input[name='color']").val(obj.data.color);
				$("input[name='suit']").val(obj.data.suit);
				$("input[name='count']").val(obj.data.count);
				
				$.each(obj.data.pictures,function(index,item){
					$('#demo2').append('<span><img src="http://localhost:9000/upload/'+ item.name +'" class="layui-upload-img">'+
										'<input type="hidden" name="picture" value="'+item.name+'"></span>')
				});
				
				
				upload.render({
				    elem: '#test2'
				    ,url: 'http://localhost:9000/upload' //此处配置你自己的上传接口即可
				    ,multiple: true
				    ,done: function(res){
				      //上传完毕//每上传一张图片，相应一次
					  $('#demo2').append('<span><img src="http://localhost:9000/upload/'+ res.data +'" class="layui-upload-img">'+
											'<input type="hidden" name="picture" value="'+res.data+'"></span>')
					  
					}
				  });
				  
				  //添加图片点击预处理事件
				  $("#demo2").on("click","span",function(){
					  $(this).remove();
				  });
				
				//获取父分类下拉列表框并渲染
				$.ajax({
				  // headers:{token:token},
				  url:'http://localhost:9000/api/goodssorts',
				  type:'get',
				  data:{},
				  dataType:'json',
				  success:function(data){
					 var html = "<option value='0'>请选择父分类</option>";
					 $.each(data.data.list,function(index,item){
						if (item.id == obj.data.goodsSort.parentSort.id) {
							html +="<option value='"+item.id+"' selected='selected'>"+item.name+"</option>";
						} else{
							html +="<option value='"+item.id+"'>"+item.name+"</option>";
						}
						
						
					 });
					 $("select[name='parent']").html(html);
					  
					  //渲染
					  form.render();
					  
					  
					  //二级分类
					  $.ajax({
					  	// headers:{token:token},
					  	url:'http://localhost:9000/api/goodssorts',
					  	type:'get',
					  	data:{parent:obj.data.goodsSort.parentSort.id},
					  	dataType:'json',
					  	success:function(data){
					  		if(data.status == 200){
					  			var html = "<option value=''>请选择二级分类</option>";
					  			
					  			$.each(data.data.list,function(index,item){
					  				if (item.id == obj.data.goodsSortId) {
					  					html +="<option value='"+item.id+" selected='selected'>"+item.name+"</option>";
					  				} else{
					  					html +="<option value='"+item.id+"'>"+item.name+"</option>";
					  				}
					  			});
					  			$("select[name='goodsSortId']").html(html);
					  			
					  			form.render();
					  		}else{
					  			layer.alert(data.msg);
					  		}
					  	},
					  	error:function(){}
					  });
					  
					  
				  },
				  error:function(){}
				});
				
				//二级分类联动
				form.on('select(parent)',function(data){
					
					var parent = data.value;
					
					if (parent > 0) {
						//ajax获取二级分类
						$.ajax({
							// headers:{token:token},
							url:'http://localhost:9000/api/goodssorts',
							type:'get',
							data:{parent:parent},
							dataType:'json',
							success:function(data){
								if(data.status == 200){
									var html = "<option value='0'>请选择二级分类</option>";
									$.each(data.data.list,function(index,item){
										
										html +="<option value='"+item.id+"'>"+item.name+"</option>";																				
									});
									$("select[name='goodsSortId']").html(html);
									
									form.render();
								}else{
									layer.alert(data.msg);
								}
							},
							error:function(){}
						});
					} else{
						$("select[name='goodsSortId']").html("<option value=''>请选择二级分类</option>");
						form.render();
					}
				});
				
				
				form.on('submit(edit)',function(data){
					
					//获取所有图片，组成一个数组
					var pictures=[];
					$("input[name='picture']").each(function(){
						pictures.push({name:$(this).val()});
					});
					
					//将数组放到data.field中
					data.field.pictures = pictures;
					
				  $.ajax({
					  url:'http://localhost:9000/api/goods',
					  type:'put',
					  data:JSON.stringify(data.field),
					  contentType:'application/json;charset=UTF-8',
					  dataType:'json',
					  success:function(data){
						if(data.status == 201){
							layer.close(index);
							gotoUrl("goods/list.html");	
							
						}else{
							 layer.msg("修改失败");											 
						}
						
					  },
					  error:function(){}
				  });
				  return false;
				});
				
			}else if(obj.event == 'recover'){
				layer.confirm('确认恢复？',function(index){
					layer.close(index);
					
					//调用删除方法(重置状态码为0)
					$.ajax({
						// headers:{token:token},
						url:'http://localhost:9000/api/goods',
						type:'delete',
						data:{id:obj.data.id},
						dataType:'json',
						success:function(data){
							if (data.status == 200) {
								layer.msg("恢复成功");
							} else if(data.status == 404){
								layer.msg(data.msg);
							}
							table.reload('list');
						},
						error:function(){}
					});
				})
			}
			
		});
		
	});
</script>